<template>
  <div class="main">
        <div class="directional-pad">
          <div class="keys-container">
            <span @mousedown="md('up')" @mouseup="mu('stop')"  :class="{'key': true}" class="up">↑</span>
            <span @mousedown="md('down')" @mouseup="mu('stop')"  :class="{'key': true}" class="down">↑</span>
            <span @mousedown="md('lift')" @mouseup="mu('stop')" :class="{'key': true}" class="left">↑</span>
            <span @mousedown="md('right')" @mouseup="mu('stop')"  :class="{'key': true}" class="right">↑</span>
          </div>
          <div class="center-button">
            <!--      <button @click="pause">暂停</button>-->
          </div>
        </div>
        <div class="fs">
          <span @mouseup="mu('stop')" @mousedown="md('small')">
            <el-button  class="direction-btn" circle>
              <!-- <i class="el-icon-circle-plus" style="color: #1f71bb;"></i> -->
               <i class="bar"><img src="@/assets/ptz/increase.png"></i>
            </el-button>
          </span>
          <span class="text">倍数调整</span>
          <span @mouseup="mu('stop')" @mousedown="md('big')">
            <el-button  class="direction-btn" circle>
              <!-- <i class="el-icon-remove" style="color: #1f71bb;"></i> -->
              <i class="bar"><img src="@/assets/ptz/decrease.png"></i>
            </el-button>
          </span>
<!--          <div class="buttonbox">-->
<!--            <el-button type="text" class="buttoni"><i><img src="@/assets/ptz/oneview.png" style="width: 35px;height: 35px;"></i></el-button>-->
<!--            <el-button type="text" class="buttoni"><i><img src="@/assets/ptz/fourview.png" style="width: 33px;height: 33px;"></i></el-button>-->
<!--            <el-button type="text" class="buttoni"><i><img src="@/assets/ptz/nineview.png" style="width: 33px;height: 33px;"></i></el-button>-->
<!--          </div>-->
        </div>
  </div>

</template>

<script>


import {ptzTurn} from "@/api/ptz/ptz";

export default {
  props:{
    deviceSn:String
  },
  data() {
    return {
      keys: {
        up: false,
        down: false,
        left: false,
        right: false,
      },
    };
  },
  methods: {
    mu(cmd){
      if(this.deviceSn!=null){
        ptzTurn(cmd,this.deviceSn)
      }else {
        this.$message({
          type:"warning",
          message:"请先选则一个相机"
        })
      }
    },
    md(cmd){
      if(this.deviceSn!=null){
        ptzTurn(cmd,this.deviceSn)
      }
    },
  },
};
</script>

<style scoped>

.main{
  /* display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px; */
  background-color: #c4d8e6;
  text-align: center;
  padding: 0px 35px;

}
.directional-pad {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  /* text-align: center; */
}

.keys-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.key {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
  border-radius: 50%;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 初始clip-path，实际需要根据方向调整 */
  transition: background-color 0.3s;
}
.up {
  transform: rotate(0deg) translateY(-25%);
  margin-bottom: 30px ;
  clip-path: polygon(50% 0%, 100% 50%, 50% 90%, 0% 50%);
  background-color:#2873f391;
}
.down {
  transform: rotate(180deg) translateY(-25%);
  margin-top: 30px ;
  clip-path: polygon(50% 0%, 100% 50%, 50% 90%, 0% 50%);
  background-color:#2873f391;
}
.left {
  margin-right: 30px;
  transform: rotate(-90deg) translateY(-25%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 90%, 0% 50%);
  background-color:#2873f391;
}
.right {
  margin-left: 30px;
  transform: rotate(90deg) translateY(-25%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 90%, 0% 50%);
  background-color:#2873f391;
}

/* 其余方向的clip-path需要根据实际情况调整，这里只给出两个方向的示例 */

.up:hover{
  background-color:#2873f3;
  color: #ffffff;
}
.down:hover{
  background-color: #2873f3;
  color: #ffffff;
}
.left:hover{
  background-color: #2873f3;
  color: #ffffff;
}
.right:hover{
  background-color: #2873f3;
  color: #ffffff;
}
.center-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  //color:  #cccccc;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  z-index: 1; /* 确保暂停按钮在其他元素之上 */
  /* border: 1px #5b79b8a9 solid ; */
}
.fs{
  text-align: center;
  justify-content: center;
  /* background-color: #ffffff; */
  width: 160px;
  height: 80px;
}
.direction-btn{
  width: 35px;
  height: 35px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0) ;
  /* background-color: #000; */
  border: none;
  margin-top: 5px;
  font-size: 35px;
  padding: 10px 0px;
  display: block;
  float: left;
}
.text{
  margin:0px 10px;
  display: block;
  float: left;
  padding: 23px 0px;
}
.buttonbox{
  /* background-color: red; */
  float: left;
  padding: 0px;
  margin-left:7px;
}
.buttoni{
  padding: 0px;
  margin-right: 5px;
}
.bar img{
  width: 35px;
  height: 35px;
}
</style>
